<template>
  <div class="dashboard-container">
    <div class="app-container" style="padding: 0px">
      <el-card shadow="never">
        <!-- 第一行 -->
        <el-row type="flex" justify="between" align="middle">
          <el-col>
            <span><strong>学科名称</strong></span>
            <el-input v-model="subjectForm.subjectName" class="el-input-style" ref="oneInput"/>
            <el-button @click="clearClick">清除</el-button>
            <el-button type="primary" @click="searchClick">搜索</el-button>
            <!-- <el-input @search="search" placeholder="测试"/> -->
          </el-col>
          <!-- <el-col :span="3"> -->
            <el-button icon="el-icon-edit" type="success" @click="subjectClick('add', 0)">新增学科</el-button>
          <!-- </el-col> -->
        </el-row>

        <!-- 消息提示 -->
        <el-alert
          type="info"
          show-icon
          class="el-alert"
        >
          <span style="font-size: 16px">数据一共{{currentCounts}}条</span>
        </el-alert>

        <!-- 数据表格显示 -->
        <el-table :data="tableList">
          <el-table-column prop="id" label="序号" width="50px" type="index"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称" min-width="25%"></el-table-column>
          <el-table-column prop="username" label="创建者" min-width="30%"></el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="160px"></el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示" min-width="30%">
            <template #default="{row}">
              {{ row.isFrontDisplay === 1 ? '是' : '否' }}
            </template>
            <!-- <el-switch v-model="tableList.isFrontDisplay" :inactive-value="0" :active-value="1" /> -->
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" min-width="30%"></el-table-column>
          <el-table-column prop="tags" label="标签" min-width="30%"></el-table-column>
          <el-table-column prop="totals" label="题目数量" min-width="30%"></el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <el-row type="flex" justify="end">
                <el-col>
                  <el-button type="text" size="mini"
                  @click="$router.push(`./directorys?id=${row.id}&name=${row.subjectName}`)"
                  >学科分类</el-button>
                  <el-button type="text" size="mini"
                  @click="$router.push(`./tags?id=${row.id}&name=${row.subjectName}`)"
                  >学科标签</el-button>
                  <el-button type="text" size="mini" @click="subjectClick('edit', row)">修改</el-button>
                  <el-button type="text" size="mini" @click="delConfirmClick(row.id, subjectForm.page )">删除</el-button>
                  <!-- <el-popconfirm title="您确定删除这个学科吗？" @onConfirm="delConfirmClick(row.id)">
                    <el-button slot="reference" type="text" size="mini">删除</el-button>
                  </el-popconfirm> -->
                </el-col>
            </el-row>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-row type="flex" justify="end" style="margin-top: 10px">
            <el-pagination
              :page-size="subjectForm.pagesize"
              :current-page.sync="subjectForm.page"
              layout="sizes, prev, pager, next, jumper"
              :background="true"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :page-sizes="[5, 10, 15, 20]"
              :total="currentCounts"
              :pager-count="5"
            >
            </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 新增弹层 -->
    <el-dialog :title='title' :visible.sync="showAddDialog" width="35%" @close="close" >
      <!-- 表单样式 -->
      <el-form ref="subjectForm" :rules="rules" :model="subjectForm" label-width="80px">

        <!-- 学科名称 -->
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="subjectForm.subjectName" placeholder="请输入学科名称" size="mini" style="width: 300px" />
        </el-form-item>

        <!-- 是否显示 -->
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch v-model="subjectForm.isFrontDisplay" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-col :span="11">
              <el-button size="mini" @click="close">取消</el-button>
              <el-button size="mini" type="primary" @click="dialogConfirmClick(currentType)">确认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, detail, update } from '@/api/hmmm/subjects'
import moment from 'moment'
export default {
  data () {
    return {
      // 用于初始数据对的列表
      tableList: [],
      // 用于记录学科数据
      subjectForm: {
        // 当前页数
        page: 1,
        // 一页显示多少条数据
        pagesize: 10,
        // 学科名称
        subjectName: null,
        // 前台是否显示
        isFrontDisplay: true,
        // 记录当前的id
        id: null
      },
      // 记录数据的条数
      currentCounts: 0,
      // 新增弹层的显示与隐藏
      showAddDialog: false,
      // 校验规则
      rules: {
        subjectName: [
          { required: true, message: '请填写学科名称', trigger: 'blur' },
          { min: 2, max: 10, message: '学科名称为2-10个字符', trigger: 'blur' }
        ]
      },
      // 记录按钮点击事件的类型
      currentType: null,
      // 设置弹层的名字
      title: ''
    }
  },
  created () {
    // 初始数据
    this.getList()
  },
  methods: {
    // 请求数据列表的方法
    async getList () {
      // console.log(this.$route)
      // 调用接口方法，结构出自己需要的数据
      const { data } = await list(this.subjectForm)
      this.currentCounts = data.counts
      // 翻转数组
      this.tableList = data.items
      // .reverse()
      this.tableList.forEach(item => {
        // 修改时间
        item.addDate = moment(item.addDate).format('yyyy-MM-DD HH:mm:ss')
      })
    },

    // 搜索按钮
    async searchClick () {
      this.getList()
    },

    // 清除按钮
    clearClick () {
      // this.$refs.input.resetFields()
      // q清空表单的数据
      this.subjectForm.subjectName = ''
      // 重新渲染
      this.getList()
    },

    // 点击分页器按钮，跳转数据详情
    handleCurrentChange (page) {
      this.$nextTick(() => {
        this.subjectForm.page = page
      })
      this.getList()
    },

    // 修改页面显示的数据条数，页面随之变化
    handleSizeChange (pagesize) {
      this.subjectForm.pagesize = pagesize
      this.getList()
    },

    // 弹层学科按钮
    async subjectClick (type, row) {
      // 打开弹层
      this.showAddDialog = true
      // 记录弹层类型
      this.currentType = type
      // 判断是编辑还是新增
      if (type === 'edit') {
        // 编辑弹层
        this.title = '修改学科'
        // 记录当前id
        this.subjectForm.id = row.id
        // this.subjectForm.subjectName = row.subjectName
        // 请求数据详细信息， 解构出需要的数据
        const { data } = await detail(this.subjectForm)
        // 回显数据
        this.subjectForm = data
      } else {
        // 显示新增学科
        this.title = '新增学科'
        this.$nextTick(() => {
          // 重置表单
          this.$refs.subjectForm.resetFields()
        })
      }
    },

    // 新增弹层的确认按钮
    dialogConfirmClick (currentType) {
      // 先做整体校验
      this.$refs.subjectForm.validate(async (isOK) => {
        if (isOK) {
          if (currentType === 'add') {
            // 校验通过，请求添加数据
            await add(this.subjectForm)
            // 友好提示
            this.$message.success('添加成功~~~')
          } else {
            // 修改按钮
            await update(this.subjectForm)
            // 友好提示
            this.$message.success('修改成功')
          }
          // 关闭弹层 + 重置表单
          this.close()
          // 重新刷新数据列表
          this.getList()
        }
      })
    },

    // 新增弹层的取消按钮
    close () {
      // 关闭弹层
      this.showAddDialog = false
      // 重置表单
      this.$refs.subjectForm.resetFields()
    },

    // 删除按钮
    async delConfirmClick (id, page) {
      // 记录点击元素的id
      this.subjectForm.id = id
      // 记录当前页码
      // this.subjectForm.page = page
      this.handleCurrentChange()
      // 调用删除接口
      await remove(this.subjectForm)
      // 友好提示
      this.$message.success('删除成功')
      // 判断删除的元素是否为本页的最后一条数据
      if (this.tableList.length === 1) {
        this.subjectForm.page--
      }
      // 刷新列表
      this.getList()
    }
  }
}
</script>

<style scoped>
  .el-input-style {
    width: 200px;
    margin: 0 15px 0 15px;
  }
  .el-alert {
    margin: 25px 0 25px 0;
  }
</style>
